<template>
	<view style="padding: 10px 20px;display: flex;">
		<scroll-view class="gl-media-view" scroll-y="true" :style="{height:swiperH+'px'}">
			<view class="" style="display: flex;flex-wrap: wrap;gap: 10px;">
				<template class="" v-for="(item, index) in data" :key="index">
					<view v-if="item.mode === 'video'" class="gl-media-item" @click="EventChange(item)">
						<video class="gl-media-video" :src="sConf.cos + item.url" controls muted http-cache></video>
					</view>
					<view v-else class="gl-media-item" @click="EventChange(item)">
						<image class="gl-media-image" :src="sConf.cos + item.url" mode="aspectFit"></image>
						<view v-if="item.mode === 'cover'" class="sign-float"><uni-icons type="home" size="24"
								color="#dd524d"></uni-icons></view>
						<view v-if="item.mode === 'banner'" class="sign-float"><uni-icons type="image" size="24"
								color="#4cd964"></uni-icons></view>
						<view v-if="item.mode === 'info'" class="sign-float"><uni-icons type="list" size="24"
								color="#007aff"></uni-icons></view>
						<view v-if="item.mode === 'video'" class="sign-float"><uni-icons type="videocam" size="24"
								color="#f0ad4e"></uni-icons></view>
						<view v-if="item.mode === 'strict'" class="sign-float"><uni-icons type="hand-up" size="24"
								color="#892fe8"></uni-icons></view>
					</view>
				</template>
				<view class="gl-media-item">
					<view class="gl-media-upload" @click="EventUploadCos">
						<uni-icons type="cloud-upload" size="40" color="#a1a1a1"></uni-icons>
						<text style="color: #a1a1a1;">上传</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="curMedia" style="padding: 0 20px;display: flex;flex-direction: column;gap: 30px;">
			<view v-if="curMedia.mode === 'video'" class="gl-media-item-max">
				<video class="gl-media-video" :src="sConf.cos + curMedia.url" controls muted http-cache></video>
			</view>
			<view v-else class="gl-media-item-max">
				<image class="gl-media-image" :src="sConf.cos + curMedia.url" mode="aspectFit" style="max-width: 320px;"></image>
			</view>
			<view style="max-width: 320px;" @click="EventClip(curMedia.url)">
				<text>{{curMedia.url}}</text>
			</view>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="none" :checked="curMedia.mode === 'none'" />无
					</label>
					<!--
					<label class="radio">
						<radio value="cover" :checked="curMedia.mode === 'cover'" />封面
					</label>
					-->
					<label class="radio">
						<radio value="banner" :checked="curMedia.mode === 'banner'" />头图
					</label>
					<label class="radio">
						<radio value="info" :checked="curMedia.mode === 'info'" /> 详情
					</label>
					<label class="radio">
						<radio value="video" :checked="curMedia.mode === 'video'" /> 视频
					</label>
					<label class="radio">
						<radio value="strict" :checked="curMedia.mode === 'strict'" /> 认证
					</label>
				</radio-group>
			</view>
			<view class="" style="display: flex;gap: 10px;">
				<text>排序:</text>
				<uni-number-box v-model="curMedia.sort" :min="0" @change="bindChange"></uni-number-box>
			</view>
			<view class="">
				<view class="gl-button gl-button-error" @tap="EventDelete(curMedia.id)">
					<uni-icons type="trash" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">删除</text>
				</view>
			</view>
		</view>

		<cos-multiple-post ref="cosPost" :host="sConf.host" :token="sConf.auth.token" path="product" onHide
			@upFinish="EventFinish"></cos-multiple-post>
	</view>
</template>

<script>
	import psCos from '@/common/psCos';
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				curMedia: null,
			}
		},
		mounted() {
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
		},
		props: {
			data: {
				type: Array,
				default: []
			},
			pid: {
				type: Number,
				default: 0
			},
			gid: {
				type: Number,
				default: 0
			},
			mode: {
				type: String,
				default: null
			}
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-media-view').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - 10 - 10;
					});
				})
			},
			EventClip(e) {
				console.log('EventClip', e);
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			EventChange(e) {
				console.log('EventChange', e);
				this.curMedia = e
			},
			radioChange(e) {
				console.log('radioChange', e.detail.value);
				let data = {
					mode: e.detail.value
				}
				this.loadImagePatch(data)
			},
			bindChange(e) {
				console.log('bindChange', e);
				this.EventSubmit()
			},
			EventSubmit() {
				console.log('EventSubmit');
				let data = {
					sort: this.curMedia.sort
				}
				this.loadImagePatch(data)
			},
			EventFinish(e) {
				console.log('EventFinish');
				if (e !== null) {
					this.loadImagesCoss(e)
				}
			},
			EventUploadCos() {
				console.log('EventUploadCos');
				this.$refs.cosPost.open()
			},
			EventDelete(pid) {
				let that = this;
				uni.showModal({
					title: '确认',
					content: '是否要删除这张照片',
					success(r) {
						if (r.confirm) {
							that.loadImageDelete(pid)
						}
					}
				});
			},
			async loadImagesCoss(e) {
				let host = this.sConf.host + '/admin/cargoCoss/';
				let token = this.sConf.auth.token || '';
				let data = {
					pid: this.pid,
					gid: this.gid,
					url: e
				}
				if (this.mode) {
					data['mode'] = this.mode
				}
				let res = await psMethod.authenticatorPostSync(host, token, data)
				console.log('coss', res);
				if (res.rescode === 200) {
					// this.curMedia = res.resmsg;
					uni.showToast({
						title: '创建成功'
					})
					this.$emit('reload')
				} else {
					uni.showToast({
						title: '创建失败'
					})
				}
			},
			async loadImagesPost(e) {
				uni.showLoading({
					title: '加载中'
				});
				let host = this.sConf.host + '/admin/cargoPics/';
				let token = this.sConf.auth.token || '';
				let data = {
					pid: this.pid,
					gid: this.gid,
					url: e,
					mode: 'none'
				}
				if (this.mode) {
					data['mode'] = this.mode
				}
				let res = await psMethod.authenticatorPostSync(host, token, data)
				if (res.rescode === 200) {
					this.curMedia = res.resmsg;
					uni.showToast({
						title: '创建成功'
					})
					// this.$emit('reload')
				} else {
					uni.showToast({
						title: '创建失败'
					})
				}
				uni.hideLoading();
			},
			async loadImagePatch(data) {
				uni.showLoading({
					title: '加载中'
				});
				let host = this.sConf.host + '/admin/cargoPics/' + this.curMedia.id + '/';
				let token = this.sConf.auth.token || '';
				let res = await psMethod.authenticatorPatchSync(host, token, data);
				if (res.rescode === 200) {
					this.curMedia = res.resmsg;
					uni.showToast({
						title: '创建成功'
					})
					// this.$emit('reload')
				} else {
					uni.showToast({
						title: '创建失败'
					})
				}
				uni.hideLoading();
			},
			async loadImageDelete(pid) {
				uni.showLoading({
					title: '加载中'
				});
				let host = this.sConf.host + '/admin/cargoPics/' + pid + '/';
				let token = this.sConf.auth.token || '';
				let res = await psMethod.authenticatorDeleteSync(host, token)
				if (res.rescode === 200) {
					this.curMedia = null;
					uni.showToast({
						title: '删除成功'
					})
					// this.$emit('reload')
				} else {
					uni.showToast({
						title: '删除失败'
					})
				}
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gl-media-item {
		padding: 5px;
		position: relative;
		border-radius: 5px;
		background-color: #a1a1a1;
		display: block;

		.gl-media-video {
			width: 100px;
			height: 160px;
			border-radius: 5px;
		}

		.gl-media-video:hover {
			background-color: #00000033;
		}

		.gl-media-image {
			width: 100px;
			height: 160px;
			border-radius: 5px;
		}

		.gl-media-image:hover {
			background-color: #00000033;
		}
	}

	.gl-media-item-max {
		position: relative;
		border-radius: 5px;
		background-color: #a1a1a1;
		display: block;

		.gl-media-video {
			width: 320px;
			height: 200px;
			border-radius: 5px;
		}

		.gl-media-image {
			width: 320px;
			height: 200px;
			border-radius: 5px;
		}
	}

	.gl-media-upload {
		width: 100px;
		height: 160px;
		border-radius: 5px;
		background-color: #f1f1f1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.gl-media-upload:hover {
		background-color: #00000033;
	}

	.sign-float {
		padding: 5px;
		background-color: #f1f1f188;
		position: absolute;
		top: 0;
		right: 0;
	}
</style>